<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="listMaterialType"
      :tableColumn="tableColumn"
      :otherConfig="otherConfig"
      :setupConfig="setupConfig"
      :searchReset="searchReset"
      :pagination="false"
      @del="del"
    >
      <template v-slot:multiple-operation="{}">
        <el-button size="medium" type="primary" @click="handleAdd()"
          >新增</el-button
        >
      </template>
    </render-table>
    <DialogView
      :dialogTitle="openDialog.dialogTitle"
      :visible="openDialog.visible"
      @submitData="submitData"
      @handleClose="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="公司类别名称" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请输入公司类别名称"
          ></el-input>
        </el-form-item>
      </el-form>
    </DialogView>
  </div>
</template>
      
      <script>
import { listMaterialType, delType, addType } from "@/api/purchase/api";

export default {
  props: {
    searchReset: {
      // 搜索条件默认值重置值
      type: Object,
    },
  },
  name: "typeTable",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "公司类别名称不能为空", trigger: "blur" },
          {
            max: 15,
            message: "公司类别名称不超过15个字符",
            trigger: "blur",
          },
        ],
      },
      setupConfig: {
        del: true,
      },
      form: {
        name: "",
      },
      openDialog: {
        dialogTitle: "新增",
        visible: false,
      },
      dict: {},
      otherConfig: {
        list: "data",
      },
      listMaterialType,
      tableColumn: [
        { prop: "materialId", label: "类别ID" },
        { prop: "typeName", label: "类别名称" },
      ],
    };
  },
  created() {},
  methods: {
        /** 新增按钮操作 */
        handleAdd() {
      this.openDialog.visible = true;
      this.openDialog.dialogTitle = "新增";
    },
    del(row) {
      const materialId = row.materialId || this.ids;
      this.$modal
        .confirm('是否确认删除类别名称为"' + row.typeName + '"的数据项？')
        .then(function () {
          return delType(materialId);
        })
        .then(() => {
          this.$refs.table.getData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 提交按钮 */
    submitData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const form = {};
          form.name = this.form.name;
          form.typeId = this.searchReset.typeId;
          addType(form).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.$refs.table.getData();
            this.openDialog.visible = false;
            this.form = {};
          });
        }
      });
    },
    handleClose() {
      this.openDialog.visible = false;
      this.form = {};
    },
  },
};
</script>
      